@url:'../images/';
@color1:#bfbfbf;
@color2:#e1e1e1;
@color3:#3d3e3d;

.w(@x){
	width: (@x/750)*100vw
}
.h(@x){
	height: (@x/750)*100vw
}
.bottom(@x){
	bottom: (@x/750)*100vw
}
.right(@x){
	right: (@x/750)*100vw
}

.lh(@x){
	line-height: (@x/750)*100vw
}
.fs(@x) {
  font-size: (@x/750)*100vw
}

.pad(@x,@y) {
  padding: (@x/750)*100vw (@y/750)*100vw
}


.mb(@x){
	margin-bottom: (@x/750)*100vw
}
.mt(@x){
	margin-top: (@x/750)*100vw
}
.margin(@x,@y){
	margin: (@x/750)*100vw (@y/750)*100vw 
}

.pb(@x){
	padding-bottom: (@x/750)*100vw
}
.pt(@x){
	padding-top: (@x/750)*100vw
}
.pl(@x){
	padding-left: (@x/750)*100vw
}

.grad(@x,@y) {
  background: -webkit-linear-gradient(@x, @y);
  background: -o-linear-gradient(@x, @y);
  background: -moz-linear-gradient(@x, @y);
  background: linear-gradient(@x, @y);
}

@media screen and (max-width:414px){
	




 body,html{background: #efeff4}
#app{overflow-x: hidden;width: 100%;.pb(100);}
#app.none{height: 80vh;overflow: hidden;}

/*底部*/
.footer{width:100%;.h(100);border-top: #dcdcdc solid 1px;position: fixed;bottom: 0;left: 0;background: #fff;color: #999;}
.footer ul li{float: left;width: 25%;text-align: center;.fs(20) }
.footer ul li a{color: #999}
.footer ul li span{.w(70);.h(60);margin: auto;display: block;}
.footer{
	.nav01{background: url("@{url}nav01.png");background-size: 100%}
	.nav02{background: url("@{url}nav02.png");background-size: 100%}
	.nav03{background: url("@{url}nav03.png");background-size: 100%}
	.nav04{background: url("@{url}nav04.png");background-size: 100%}

	.router-link-exact-active .nav01{background: url("@{url}nav01-1.png");background-size: 100%}
	.router-link-exact-active .nav02{background: url("@{url}nav02-1.png");background-size: 100%}
	.router-link-exact-active .nav03{background: url("@{url}nav03-1.png");background-size: 100%}
	.router-link-exact-active .nav04{background: url("@{url}nav04-1.png");background-size: 100%}
	.router-link-exact-active{color: #56b6f3}
}

/*列表*/
.toDay{width: 100%;.h(80);border-bottom: #ddd solid 1px;background: #fff;color: #999;text-align: center;.fs(30);.lh(80);.grad(#ffffff,#f3f3f3)}
.list{
	width: 100%;background: #fff;
	.item{border-bottom: @color1 solid 1px;.pad(10,0);}
	.item .itemTop{overflow: hidden;text-align: center;.w(640);border-left: #ddd solid 1px;.pb(10)}
	.item .itemLeft{.w(100);float: left;text-align: center;.pt(60)}
	.item .left{float: left;width: 35%;}
	.item .info{float: left;width: 30%}
	.item .right{float: left;width: 35%}
	.sLogo{.w(124);.h(124);margin: auto;}
	.sLogo img{.w(120);.h(120);border-radius: 50%}
	.sTime{.fs(24)}
	.sName{.fs(24)}
	.sNum{.fs(32);.mt(20)}
	.pay{border: #ddd solid 1px;.w(100);margin: auto;.fs(20);.mt(10);border-radius:2px}
	.sIcon{width: 100%;.h(80);background: url("@{url}vs.jpg") center no-repeat;background-size:auto 100%;.mt(30)}

	.itemBottom{overflow: hidden;border-top: #ddd solid 1px;text-align: center;.pad(10,10);.pl(100);}
	.itemBottom .pay{border: #ddd solid 1px;.w(180);.margin(10,10);.fs(20);.mt(10);border-radius:2px;display: inline-block;}
	.itemBottom .pay span{display: block;}

	.itemMessage{border-top: #ddd solid 1px;text-align: center;.pad(10,10);.pl(100);}
}
/*首页*/
.main{
	.banner{width: 100%;.h(400);border-bottom: #ddd solid 1px;}
	.banner img{width: 100%;.h(400)}

	.item{.mb(20);background: #fff}
	.item .title{.pad(10,20);.fs(26);border-bottom: #ddd solid 1px;background: #fff;.h(50);.lh(50);.grad(#ffffff,#f3f3f3)}
	.item .title span{.fs(30);margin-right: 2px;color: #4397e4}
	.item .title a{float: right;color: #999}
}

.navTop{overflow: hidden;.pad(10,20);.fs(24);
	.left{float: left;}
	.right{float: right;}
}


/*个人中心*/
.about{
	background: #fff;
	.list{.fs(32);}
	.list ul{border-bottom: #ddd solid 1px;}
	.list ul li{border-top: #ddd solid 1px;.pad(10,20);.h(70);.lh(70);background:url('@{url}list.png') 96% 50% no-repeat #fff;}
	.list ul li.none{background: #fff}
	.sign{position: absolute;.right(20);.bottom(160);.w(70);.h(70);background: #4397e4;color: #fff;border-radius: 8px;text-align: center;.lh(70);.fs(24)}
	button{.w(600);.h(80);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.fs(24);.margin(20,80);.mt(40);background: #d40c0c;border: none;cursor: pointer;;color: #fff;.fs(34)}
} 



/*投注输出框*/
.pay{
	.hb{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.2);top: 0;left: 0}
	.info{.h(480);background: #fafafa;position: absolute;z-index: 10;bottom: 0;width: 100%}
	.info form{.pad(20,20)}
	.item{border-bottom: #ddd solid 1px;.pad(20,20)}
	.title{border-bottom: #ddd solid 1px;.h(60);.lh(60);text-indent:10px;.grad(#ffffff,#f3f3f3);.fs(24)}
	.txtle{.pl(20);.fs(28);.lh(40)}
	.enter{background: #f5f5f5;border: #ddd solid 1px;.w(710);margin: auto;.mt(20);border-radius: 4px;overflow: hidden;}
	.enter span{.w(128);.h(70);background: #f5f5f5;float: left;text-align: center;.lh(70);.fs(24);border-right: #ddd solid 1px;}
	.enter input{.h(50);.w(540);border: none;.pad(10,20);.fs(24)}
	.click{.pad(20,20)}
	.click .message{float: left;.w(360);.fs(24)}
	.click .message p{.mt(5)}
	.click button{.w(320);background: #ff0000;.h(70);color: #fff;border: none;border-radius: 4px;cursor: pointer;.fs(24);.mt(10)}
	.enterClick{.pad(10,20);overflow: hidden;}
	.enterClick span{width: 25%;cursor: pointer;.h(60);.lh(60);color: #fff;display: inline-block;float: left;text-align: center;background: #545454;box-sizing:border-box;border-right: #fff solid 1px;border-radius: 2px;.fs(24)}
}

/*充值中心*/
.recharge{
	background: #fff;width: 100%;
    height: 100%;position: fixed;
    bottom: 0;
    left: 0;
	.txtle{.pad(20,20);.fs(34)}
}

/*展示页*/
.show{
	width: 100%;
	.item{border-bottom: @color1 solid 1px;background: #fff;.pad(10,0);}
	.item .itemTop{overflow: hidden;text-align: center;border-left: #ddd solid 1px}
	.item .left{float: left;width: 35%;}
	.item .info{float: left;width: 30%}
	.item .right{float: left;width: 35%}
	.sLogo{.w(124);.h(124);margin: auto;}
	.sLogo img{.w(120);.h(120);border-radius: 50%}
	.sTime{.fs(24)}
	.sName{.fs(24)}
	.sNum{.fs(32);.mt(20)}
	.pay{border: #ddd solid 1px;.w(160);margin: auto;.fs(20);.mt(10);border-radius:2px}
	.pay span{display: block;}
	.sIcon{width: 100%;.h(80);background: url("@{url}vs.jpg") center no-repeat;background-size:auto 100%;.mt(30);.mb(58)}
}


/*登录*/
.login{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #fff;
	.info{.pad(40,40)}
	input{.w(650);.h(70);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.mb(30);.fs(24)}
	.txtle{text-align: center;}
	button{.w(300);.h(80);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.fs(24);.margin(0,10);.mt(40);background: #d40c0c;border: none;cursor: pointer;;color: #fff;.fs(34)}
} 

/*注册*/
.register{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #fff;
	.info{.pad(40,40)}
	input{.w(650);.h(70);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.mb(30);.fs(24)}
	.txtle{text-align: center;}
	button{.w(300);.h(80);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.fs(24);.margin(0,10);.mt(40);background: #d40c0c;border: none;cursor: pointer;;color: #fff;.fs(34)}
	select{.w(670);.h(80);border-radius: 4px;border: #ddd solid 1px;.pad(5,10);.mb(30);.fs(24)}
} 


/*积分排名*/
.renking{
	background: #fff;
	.list span{float: left}
	.list ul li{border-bottom: #ddd solid 1px;overflow: hidden;.lh(60)}
	.list .top span{text-align: center;}
	.list span.num{.w(140);text-align: center;}
	.list span.num i{font-style:normal;}
	.list span.name{.w(400);.pad(0,10);overflow: hidden;text-align: center;}
	.list span.number{.w(160);.pad(0,10);text-align: center;}
}

/*订单*/
.order{
	.list ul li{border-bottom: #ddd solid 1px;.mb(10);overflow: hidden;background: #fff;position: relative;}
	.number{.h(60);border-bottom: #ddd solid 1px;border-top: #ddd solid 1px;background: #fff;color: #999;.fs(22);.lh(60);.pad(0,20)}
	.number span{float: right}
	.title{.fs(24);.pad(0,20);.lh(38);.mt(20);color: #666}
	.txtle{.fs(24);.pad(0,20);.lh(38)}
	.price{.fs(24);.pad(0,20);.lh(38);.mb(20)}
	.numBox{position: absolute;.right(20);.bottom(56)}
	.end{position: absolute;.right(30);.bottom(10);color: red;.fs(24)}
}



}



@media screen and (min-width:415px){

	#app{width: 750px;margin: auto}

	/*首页*/
	.main{
		.banner{width: 100%;height: 300px;background: #dcdcdc;border-bottom: #ddd solid 1px;}
		.banner img{width: 100%;height: 300px;}

		.item{margin-bottom: 20px;background: #fff}
		.item .title{padding: 10px 20px;font-size: 24px;border-bottom: #ddd solid 1px;background: #fff;height: 50px;line-height: 50px;.grad(#ffffff,#f3f3f3)}
		.item .title span{font-size: 30px;margin-right: 2px;color: #4397e4}
		.item .title a{float: right;color: #999}
	}

	.navTop{overflow: hidden;padding: 10px 20px;font-size: 20px;
		.left{float: left;}
		.right{float: right;}
	}

	/*底部*/
	.footer{width:750px;height: 100px;border-top: #dcdcdc solid 1px;position: fixed;bottom: 0;left: 50%;margin-left: -375px;background: #fff;color: #999;}
	.footer ul li{float: left;width: 25%;text-align: center;font-size: 24px;cursor: pointer;}
	.footer ul li a{color: #999}
	.footer ul li span{width: 70px;height: 60px;margin: auto;display: block;}
	.footer{
		.nav01{background: url("@{url}nav01.png");background-size: 100%}
		.nav02{background: url("@{url}nav02.png");background-size: 100%}
		.nav03{background: url("@{url}nav03.png");background-size: 100%}
		.nav04{background: url("@{url}nav04.png");background-size: 100%}

		.router-link-exact-active .nav01{background: url("@{url}nav01-1.png");background-size: 100%}
		.router-link-exact-active .nav02{background: url("@{url}nav02-1.png");background-size: 100%}
		.router-link-exact-active .nav03{background: url("@{url}nav03-1.png");background-size: 100%}
		.router-link-exact-active .nav04{background: url("@{url}nav04-1.png");background-size: 100%}

		.router-link-exact-active{color: #56b6f3}
	}



	/*登录*/
	.login{width: 100%;height: 100%;top: 0;left: 0;background: #fff;
		.info{padding: 40px}
		input{width: 650px;height: 70px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;margin-bottom: 20px;font-size: 24px;}
		.txtle{text-align: center;}
		button{width: 280px;height: 80px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;font-size: 24px;margin:20px;background: #d40c0c;border: none;cursor: pointer;;color: #fff;font-size: 30px;}
	} 

	/*注册*/
	.register{width: 100%;height: 100%;top: 0;left: 0;background: #fff;
		.info{padding: 40px}
		input{width: 650px;height: 70px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;margin-bottom: 20px;font-size: 24px;}
		.txtle{text-align: center;}
		button{width: 280px;height: 80px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;font-size: 24px;margin:20px;background: #d40c0c;border: none;cursor: pointer;;color: #fff;font-size: 30px;}
		select{width: 670px;height: 80px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;margin-bottom: 20px;font-size: 24px;}
	}

	/*列表*/
	.toDay{width: 100%;height: 80px;border-bottom: #ddd solid 1px;background: #fff;color: #999;text-align: center;font-size: 30px;line-height: 80px;.grad(#ffffff,#f3f3f3)}
	.list{
		padding-bottom: 100px;
		width: 100%;background: #fff;
		.item{border-bottom: @color1 solid 1px;padding: 10px 0;}
		.item .itemTop{overflow: hidden;text-align: center;width: 640px;border-left: #ddd solid 1px;padding-bottom: 10px}
		.item .itemLeft{width: 100px;float: left;text-align: center;padding-top: 60px}
		.item .left{float: left;width: 35%;}
		.item .info{float: left;width: 30%}
		.item .right{float: left;width: 35%}
		.sLogo{width: 124px;height: 124px;margin: auto;}
		.sLogo img{width: 120px;height: 120px;border-radius: 50%}
		.sTime{font-size: 24px}
		.sName{font-size: 24px}
		.sNum{font-size: 32px;margin-top: 20px}
		.pay{border: #ddd solid 1px;width: 100px;margin: auto;font-size: 20px;margin-top: 10px;border-radius:2px}
		.sIcon{width: 100%;height: 80px;background: url("@{url}vs.jpg") center no-repeat;background-size:auto 100%;margin-top: 30px}

		.itemBottom{overflow: hidden;border-top: #ddd solid 1px;text-align: center;padding: 10px;padding-left: 100px;}
		.itemBottom .pay{border: #ddd solid 1px;width: 180px;margin: 10px;font-size: 20px;margin-top: 10px;border-radius:2px;display: inline-block;cursor: pointer;}
		.itemBottom .pay:hover{background: #dcdcdc}
		.itemBottom .pay span{display: block;}

		.itemMessage{border-top: #ddd solid 1px;text-align: center;padding: 10px;padding-left: 100px;}
	}

	/*个人中心*/
	.about{
		background: #fff;
		.list{font-size: 32px);}
		.list ul{border-bottom: #ddd solid 1px;}
		.list ul li{border-top: #ddd solid 1px;padding: 10px 20px;height: 50px;line-height: 50px;background:url('@{url}list.png') 96% 50% no-repeat #fff;cursor: pointer;font-size: 24px;}
		.list ul li.none{background: #fff}
		.sign{position: absolute;left:50%;margin-left: 300px;bottom: 160px;width: 70px;height: 70px;line-height: 70px;background: #4397e4;color: #fff;border-radius: 8px;text-align: center;font-size: 24px;cursor: pointer;}
		button{width: 560px;height: 80px;border-radius: 4px;border: #ddd solid 1px;padding: 5px 10px;font-size: 24px;margin:20px 90px;background: #d40c0c;border: none;cursor: pointer;;color: #fff;font-size: 30px;}
	}

	.order{
		.list ul li{border-bottom: #ddd solid 1px;margin-bottom: 10px;overflow: hidden;background: #fff;position: relative;}
		.number{height: 60px;border-bottom: #ddd solid 1px;border-top: #ddd solid 1px;background: #fff;color: #999;font-size: 22px;line-height: 
			60px;padding: 0px 20px;}
		.number span{float: right}
		.title{font-size: 24px;padding: 0 20px;line-height: 38px;margin-top: 20px;color: #666}
		.txtle{font-size: 24px;padding: 0 20px;line-height: 38px;}
		.price{font-size: 24px;padding: 0 20px;line-height: 38px;margin-bottom: 20px}
		.numBox{position: absolute;right: 20px;bottom: 56px}
		.end{position: absolute;right: 30px;bottom: 10px;color: red;font-size: 22px;}
	}


	/*积分排名*/
	.renking{
		background: #fff;
		.list span{float: left}
		.list ul li{border-bottom: #ddd solid 1px;overflow: hidden;line-height: 60px}
		.list .top span{text-align: center;}
		.list span.num{width: 140px;text-align: center;}
		.list span.num i{font-style:normal;}
		.list span.name{width: 400px;padding: 0 10px;overflow: hidden;text-align: center;}
		.list span.number{width: 160px;padding: 0 10px;text-align: center;}
	}

	/*投注输出框*/
	.pay{
		.hb{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.2);bottom: 0;left: 0}
		.info{height: 420px;background: #fafafa;position: fixed;z-index: 10;bottom: 0;width: 750px}
		.item{border-bottom: #ddd solid 1px;padding: 20px}
		.title{border-bottom: #ddd solid 1px;height: 60px;line-height: 60px;text-indent:10px;.grad(#ffffff,#f3f3f3);font-size: 24px}
		.txtle{padding-left: 20px;font-size: 28px;line-height: 40px}
		.enter{background: #f5f5f5;border: #ddd solid 1px;width: 710px;margin: auto;margin-top: 20px;border-radius: 4px;overflow: hidden;}
		.enter span{width: 128px;height: 70px;background: #f5f5f5;float: left;text-align: center;line-height: 70px;font-size: 24px;border-right: #ddd solid 1px;}
		.enter input{height: 50px;width: 540px;border: none;padding: 10px 20px;font-size: 24px;}
		.click{padding: 20px}
		.click .message{float: left;width: 360px;font-size: 24px}
		.click .message p{margin-top: 5px;}
		.click button{width: 320px;background: #ff0000;height: 70px;color: #fff;border: none;border-radius: 4px;cursor: pointer;font-size: 24px;margin-top: 10px}
		.enterClick{padding: 10px 20px;overflow: hidden;}
		.enterClick span{width: 25%;cursor: pointer;height: 60px;line-height: 60px;color: #fff;display: inline-block;float: left;text-align: center;background: #545454;box-sizing:border-box;border-right: #fff solid 1px;border-radius: 2px;font-size: 24px;}
	}

	/*充值中心*/
	.recharge{
		background: #fff;width: 750px;
	    height: 100%;
	    bottom: 0;
	    left: 0;
		.txtle{padding: 20px;font-size: 34px;}
	}

}